<template>
  <div class="addEditDialog addEditHouse">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%" @close="closeDialog">
      <!-- :rules="rules" -->
      <el-form :model="ruleForm"  ref="ruleFormref" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="houseOwnerName" label="房主：" style="width:50%;">      
            <el-input v-model="ruleForm.houseOwnerName" clearable :disabled="true" >            
            </el-input>                      
        </el-form-item>
        <el-form-item prop="houseOwnerPhoneNumber" label="房主手机：" style="width:50%;">
          <el-input v-model="ruleForm.houseOwnerPhoneNumber" clearable :disabled="true" >            
          </el-input>         
        </el-form-item> 
        <el-form-item prop="houseName" label="房屋名称：" style="width:50%;">
          <el-input v-model="ruleForm.houseName" clearable :disabled="true" >            
          </el-input>         
        </el-form-item>
        <el-form-item prop="roomNum" label="房型：" style="width:50%;">         
           <span class="disabledShow" >{{ruleForm.roomNum}}室{{ruleForm.parlourNum}}厅</span>
                      
        </el-form-item>
       <el-form-item prop="lockImei" label="锁编号：">
          <el-input v-model="ruleForm.lockImei" clearable placeholder="请输入登陆账号">            
          </el-input>         
        </el-form-item>             
        <el-form-item  label="省/市/区：">           
           <span  class="disabledShow" style="width:100%;text-align:left">{{ruleForm.provinceName }}{{ ruleForm.cityName }}{{ ruleForm.countyName }}</span>         
        </el-form-item>
        <el-form-item prop="addressDetail" label="房间详址：">
          <el-input v-model="ruleForm.addressDetail" clearable :disabled="true" >            
          </el-input>         
        </el-form-item>
        <el-form-item prop="addressDetail" label="身份证正反面:" style="width:60%;">                
        </el-form-item>
         <el-form-item prop="propertyOwnershipCertificateUrl" label="房产证:" style="width:40%;">             
        </el-form-item>     
        <el-form-item prop="addressDetail" class="pic">    
             <span  style="width:30%;margin-right:3%"><img :src="ruleForm.frontOfIdCardUrl" alt="" style=" max-height:160px"></span> 
             <span style="width:30%;margin-right:3%"><img :src="ruleForm.reverseOfIdCardUrl" alt=""  style=" max-height:160px;"></span>
              <span style="width:30%;margin-left:2%"><img :src="ruleForm.propertyOwnershipCertificateUrl" alt=""  style=" max-height:160px"></span>  
        </el-form-item> 
     
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleFormref')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'showImg',
  data () {
    return {  
    title:null,   
      url:'',
      ruleForm: {
            houseName:null, // (string, optional): 房屋名称 ,
            lockImei:null, // (string, optional): 锁编号 ,
            parlourNum:null, // (integer, optional): 客厅数 ,
            roomNum:null, // (integer, optional): 房间数 ,
            addressDetail: null,//详细地址 ,
            cityCode:null, //城市编码 ,
            cityName:null, //(string, optional): 城市名称 ,
            countyCode:null, // (string, optional): 区县编码 ,
            countyName:null, // (string, optional): 区县名称 ,
            houseId:null, // (string, optional): 详细地址 ,            
            houseOwnerIdCard:null, // (string, optional): 房产人身份证号 ,
            houseOwnerName:null, // (string, optional): 房产人姓名 ,
            houseOwnerPhoneNumber:null, // (string, optional): 房产人手机号 ,
            houseStatusEnum :null, //(string, optional): 状态 = ['HouseStatusEnum{key='1', enumName='PENDING_APPROVAL', value='待审核'}', 'HouseStatusEnum{key='2', enumName='AUDITED', value='已审核'}', 'HouseStatusEnum{key='3', enumName='REJECTED', value='驳回'}'],
            id:null, // (integer, optional): 详细地址 ,          
            lockMac:null, // (string, optional): 锁mac地址 ,
            lockRoomId:null, // (string, optional): 锁端房间id ,          
            provinceCode:null, // (string, optional): 省份编码 ,
            provinceName:null, // (string, optional): 省份名称 ,
            remark:null, // (string, optional): 备注 ,           
            version:null, // (integer, optional): 版本号  
            frontOfIdCardUrl:null,
            reverseOfIdCardUrl:null,
            propertyOwnershipCertificateUrl:null,
            streetCode: null,
            streetName:null
                 
        },   
      dialogVisible: false,           
      // rules: {
      //   lockImei: [
      //     { required: true, message: '不能为空', trigger: 'blur' }         
      //   ],
            
      // },
       
    }
  },
methods: { 
    closeDialog(){

    },
    loadDialogData(item,title,url){     
      this.dialogVisible=true; 
   
      setTimeout(() => {
        this.title=title;
        this.url=url;            
        this.$refs['ruleFormref'].resetFields(); //重置  弹窗数据 
        this.ruleForm.houseName=item.houseName;
        this.ruleForm.lockImei=item.lockImei;  
        this.ruleForm.roomNum=item.roomNum;  
        this.ruleForm.parlourNum=item.parlourNum; 
        this.ruleForm.provinceName=item.provinceName;
        this.ruleForm.cityName=item.cityName; 
        this.ruleForm.countyName=item.countyName; 
        this.ruleForm.addressDetail=item.addressDetail; 
        this.ruleForm.houseOwnerName=item.houseOwnerName;  
        this.ruleForm.houseOwnerPhoneNumber=item.houseOwnerPhoneNumber;
        this.ruleForm.cityCode=item.cityCode; 
        this.ruleForm.cityName=item.cityName; 
        this.ruleForm.countyCode=item.countyCode; 
        this.ruleForm.countyName=item.countyName; 
        this.ruleForm.provinceCode=item.provinceCode; 
        this.ruleForm.provinceName=item.provinceName;   
        this.ruleForm.houseOwnerIdCard=item.houseOwnerIdCard;  
        this.ruleForm.houseStatusEnum=item.houseStatusEnum.enumName;                               
        this.ruleForm.id=item.id;  
        this.ruleForm.lockMac=item.lockMac;  
        this.ruleForm.lockRoomId=item.lockRoomId;  
        this.ruleForm.remark=item.remark;  
        this.ruleForm.version=item.version;  
        this.ruleForm.frontOfIdCardUrl=item.frontOfIdCardUrl; //身份证 
        this.ruleForm.reverseOfIdCardUrl=item.reverseOfIdCardUrl;  //身份证反面 
        this.ruleForm.propertyOwnershipCertificateUrl=item.propertyOwnershipCertificateUrl;  //房产证
        this.ruleForm.houseId= item.houseId;
        this.ruleForm.streetCode= item.streetCode;
        this.ruleForm.streetName= item.streetName;
      }, 10);         
    },
    submitForm(formName) {     
     
        this.$refs[formName].validate((valid) => {
          if (valid){     
                                                                                             
              this.$store.dispatch('postform',{param:this.ruleForm,url:this.url}).then(() => {
                if(this.addEdit.code==0){
                  this.$message({
                    message: this.addEdit.msg,
                    type: 'success'
                  });               
                  this.dialogVisible=false;  
                       
                  this.$emit('fatherMethod'); 
                }else{
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'warning'
                  }); 
                }              
              }).catch(() => {
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'error'
                  }); 
                  
              })                        
          } else {            
            return false;
          }
        });
      },
  
  },
  computed:{
    
    ...mapState(['list','addEdit'])
  },
  mounted(){   
      
        
  }
}
</script>

<style scoped>
    .addEditDialog .el-select{
    width: 100%
    }
    .disabledShow{
        display: inline-block;       
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        height:40px;
        line-height: 40px;
        background-color: #F5F7FA;
        border: 1px solid #DCDFE6 ;
        color: #C0C4CC;
        border-radius:4px;        
        text-align: left;
    }
    img{
        width: 100%;
    } 
</style>
<style>
  .addEditHouse .demo-ruleForm{
        overflow: hidden
  } 
  .addEditHouse .el-form-item {
    width: 100%;
    float: left;
   
  }
  .addEditHouse .el-form-item__content{
      width: calc(100% - 100px);
  }
    .addEditHouse .pic{
      margin-bottom: 0 !important;
    }
  .addEditHouse .pic .el-form-item__content{
    width: 100%;
    margin-left: 0px !important; 
    overflow: hidden;
  } 
  .addEditHouse .pic .el-form-item__content span{
    display: inline-block;
    width: 33%;
    float: left;
   box-sizing: border-box;
  }
  .addEditHouse .el-form{
    height: 550px !important;  
    overflow-y: auto; 
    padding-right: 10px; 
  }
  .addEditHouse .el-form::-webkit-scrollbar {/*滚动条整体样式*/
  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;

}
.addEditHouse .el-form::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
  background: rgb(216, 214, 214);
}
.addEditHouse .el-form::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: rgb(247, 244, 244);
}
  .addEditHouse .el-dialog__body{
    padding-bottom:0px !important;
  }
</style>
